<!--
/**
 * author: vformAdmin
 * email: vdpadmin@163.com
 * website: https://www.vform666.com
 * date: 2023.07.20
 * remark: Container Layout Container
 */
-->

<template>
  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
                     :index-of-parent-list="indexOfParentList">

    <el-container :key="widget.id" class="container-layout"
                  :class="[selected ? 'selected' : '', customClass]"
                  @click.stop="selectWidget(widget)">
      <el-header v-if="widget.options.showHeader" :height="widget.options.headerHeight">
        <slot name="header"></slot>
      </el-header>
      
      <el-container>
        <el-aside v-if="widget.options.showAside" :width="widget.options.asideWidth">
          <slot name="aside"></slot>
        </el-aside>
        
        <el-main>
          <draggable 
            :list="widget.widgetList"
            v-bind="{group:'dragGroup', ghostClass: 'ghost', animation: 200}"
            handle=".drag-handler"
            @add="onContainerDragAdd($event, widget.widgetList)"
            @update="onContainerDragUpdate"
            :move="checkContainerMove"
          >
            <transition-group name="fade">
              <template v-for="(subWidget, swIdx) in widget.widgetList" :key="subWidget.id">
                <component
                  :is="subWidget.type + '-widget'"
                  :widget="subWidget"
                  :designer="designer"
                  :parent-list="widget.widgetList"
                  :index-of-parent-list="swIdx"
                  :parent-widget="widget"
                ></component>
              </template>
            </transition-group>
          </draggable>
          <slot></slot>
        </el-main>
      </el-container>
      
      <el-footer v-if="widget.options.showFooter" :height="widget.options.footerHeight">
        <slot name="footer"></slot>
      </el-footer>
    </el-container>

  </container-wrapper>
</template>

<script>
  import i18n from "@/utils/i18n"
  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin";
  import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper";
  import refMixinDesign from "@/components/form-designer/refMixinDesign"
  import SvgIcon from '@/components/svg-icon'

  export default {
    name: "container-layout",
    componentName: 'ContainerWidget',
    mixins: [i18n, containerMixin, refMixinDesign],
    inject: ['refList'],
    components: {
      ContainerWrapper,
      ...FieldComponents,
      SvgIcon,
    },
    props: {
      widget: Object,
      parentWidget: Object,
      parentList: Array,
      indexOfParentList: Number,
      designer: Object,
    },
    computed: {
      selected() {
        return this.widget.id === this.designer.selectedId
      },

      customClass() {
        return this.widget.options.customClass || ''
      },
    },
    created() {
      this.initRefList()
      if (!this.widget.options) {
        this.widget.options = {
          showHeader: true,
          headerHeight: '60px',
          showFooter: true,
          footerHeight: '60px',
          showAside: true,
          asideWidth: '200px'
        }
      }
      if (!this.widget.widgetList) {
        this.$set(this.widget, 'widgetList', [])
      }
      this.designer.registerContainer(this.widget) // 注册容器到designer
    },
    methods: {
      selectWidget(widget) {
        this.designer.setSelected(widget)
      },
      
      onContainerDragAdd(evt, subList) {
        const newIndex = evt.newIndex
        if (!!subList[newIndex]) {
          this.designer.setSelected(subList[newIndex])
        }
        
        this.designer.emitHistoryChange()
      },
      
      onContainerDragUpdate() {
        this.designer.emitHistoryChange()
      },
      
      checkContainerMove(evt) {
        return this.designer.checkWidgetMove(evt)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container-layout {
    min-height: 200px;
    outline: 1px dashed #336699;
    
    .el-header, .el-footer {
      background-color: #f5f7fa;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }
    
    .el-aside {
      background-color: #e6e9ed;
    }
    
    .el-main {
      background-color: #ffffff;
      min-height: 100px;
    }
  }

  .container-layout.selected {
    outline: 2px solid $--color-primary !important;
  }
</style>